import chart from '@/utils/chart.js'
import { toYYYYMMDD, toHHMM, toMMDD, formatTimeStamp } from '@/utils/timeUtil'
import { parseNumFloat } from '@/utils/tool'
import { keyToZh, valToZh } from './codeMaps.js'
import { ONE_DAY_MS } from './consts.js'
export const chartTemp = (chartData, time_start, time_end, isOneDay, showModeTip,deviceDetail) => {
  let fieldList = [
    { key: 'mode', color: '#35cfd1' },
    { key: 'setTem', color: '#fda857' },
    { key: 'rTem', color: '#8DBAF3' }
    // { key: 'airQ', color: 'red' }
  ]
  
  let series = []
  for (let item of fieldList) {
    let isArea = item.key === 'rTem'
    let style = chart.styleConfig(item.color, 'solid', isArea)
    let o = {
      data: [],
      name:  keyToZh(item.key),
      ...chart.ECHART_LINE_CONFIG_BIG_DATA,
      ...style
    }
    if (item.key === 'mode') {
      o.lineStyle = {
        opacity: 0
      }
      o.itemStyle = {
        opacity: 0
      }
    }
    series.push(o)
    console.log('series:', series)
    for (let data of chartData) {
      o.data.push([data.upload, data.data[item.key]])
    }
    console.log('series+++++:', series)
  }
  console.log('---------series----', series)

  let xInterval = 1
  if (time_end - time_start >= 11 * 24 * 3600 * 1000) {
    xInterval = 4
  }

  // 选择 一天 的x轴config
    let xAxisConfig = {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6E798B'
        }
      },
      splitLine: {
        show: false
      },
      boundaryGap: true,
      type: 'time',
      maxInterval: 1 * 3600 * 1000,
      min: function (value) {
        let todayStart = new Date(
          new Date(value.min).toLocaleDateString()
        ).getTime()
        return todayStart
      },
      max: function (value) {
        let todayStart = new Date(
          new Date(value.min).toLocaleDateString()
        ).getTime()
        let todayEnd = todayStart + ONE_DAY_MS
        return todayEnd
      },
      axisLabel: {
        show: true,
        color: '#F1F2F4',
        rotate:40,
        formatter: (value, index) => {
          let t = toHHMM(new Date(value).getTime())
          return `${t}`
        }
      }
      // data: xData
    }

  let option = {
    // legend: {
    //   data: ['设定温度', '房间温度'],
    //   selected: legendSelected,
    //   ...chart.DETAIL_LEGEND
    // },
    // grid: chart.DETAIL_GRID,
    legend:{
      tooltip:{
          // show:true
      },
      icon: "circle",
      x:'right',
      padding:[30, 80,0 ,0],
      data: ["设定温度","房间温度"],
      textStyle: { color: "#F1F2F4" },
    },
    grid: {
      left: '3%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      ...chart.TOOLTIP,
      formatter: (params, ticket) => {
        let s = ''
        s = s + formatTimeStamp(params[0].axisValue) + `<br/>`

        for (let item of params) {
          let unit = ''
          if (item.seriesName.indexOf('温度') >= 0) {
            unit = '°C'
            s += `<span style="color:${item.color}">
                <span  class="tooltip-m">${item.seriesName}: </span>${item.value[1]}${unit}</span></br>`
          } else if (showModeTip) {
            s += `<span style="color:${item.color}">
                <span class="tooltip-m">${item.seriesName}: </span>${valToZh(item.value[1])}</span></br>`
          }
        }
        return s
      }
    },
    dataZoom: [
      {
        type: 'inside',
        throttle: 50
      }
    ],
    xAxis: {
      type: 'time',
      ...xAxisConfig,
      axisTick:{
        show:false
      }
    },
    yAxis: {
      name: '°C',
      type: 'value',
      ...chart.AXIS_STYLE
    },
    series: series
  }
  return option
}